<template>
  <storeDiyForm :title="diyItem.name">
    <template #content>
      <storeDiyFormItem label="数据来源">
        <storeDiyFormSelectBtn
          v-model="diyItem.params.source"
          :data="sourceData"
          @change="changeSource"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem
        :label="`限制个数`"
        desc="0为限制"
        v-show="
          diyItem.params.source == 'auto' || diyItem.params.source == 'cate'
        "
      >
        <el-input type="number" v-model="diyItem.params.limit" />
      </storeDiyFormItem>
      <storeDiyFormItem
        label="选择商品"
        v-show="diyItem.params.source == 'choice'"
      >
        <storeDiyFormSelectGoodsBtn
          v-model:ids="diyItem.params.goods_id"
          v-model:data="diyItem.data"
          ref="storeDiyFormSelectGoodsBtnRef"
        >
        </storeDiyFormSelectGoodsBtn>
      </storeDiyFormItem>
      <storeDiyFormItem
        v-if="diyItem.data.length > 0 && diyItem.params.source == 'choice'"
      >
        <div class="diy-editor-select-goods-box">
          <template v-for="(item, index) in diyItem.data" :key="index">
            <div class="diy-editor-select-goods-item">
              <div
                class="diy-editor-select-goods-del icon icon-cuo"
                @click="del(item?.id, index)"
              ></div>
              <el-avatar
                :src="item.goods_image"
                :size="40"
                shape="square"
              ></el-avatar>
              <div class="goods-name">{{ item.goods_name }}</div>
            </div>
          </template>
        </div>
      </storeDiyFormItem>
      <storeDiyFormItem
        label="商品分类"
        v-show="diyItem.params.source == 'cate'"
      >
        <storeDiyFormSelectGoodsCateBtn
          v-model="diyItem.params.cate_id"
          :opts="opts"
          :multiple="true"
        ></storeDiyFormSelectGoodsCateBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="排序规则">
        <storeDiyFormSelectBtn
          v-model="diyItem.params.sort"
          :data="sortData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
    </template>
    <template #style>
      <storeDiyFormItem label="布局">
        <storeDiyFormSelectBtn
          :icon="true"
          v-model="diyItem.layout.value"
          :data="layoutData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>

      <storeDiyFormItem label="列表">
        <storeDiyFormSelectBtn
          v-model="diyItem.layout.scroll"
          :data="scrollData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="边框">
        <storeDiyFormSelectBtn
          v-model="diyItem.layout.border"
          :data="layoutBorderData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="描边颜色" v-if="diyItem.layout.border == 3">
        <storeDiyFormColorBtn v-model="diyItem.style.item_border_color" />
      </storeDiyFormItem>

      <storeDiyFormItem label="商品间距">
        <div class="editor-input-block">
          <div class="editor-input-desc">
            {{ diyItem.style.item_pm }}px(像素)
          </div>
          <el-slider
            v-model="diyItem.style.item_pm"
            size="small"
            :min="0"
            :max="30"
          />
        </div>
      </storeDiyFormItem>
      <storeDiyFormItem label="商品圆角">
        <div class="editor-input-block">
          <div class="editor-input-desc">
            {{ diyItem.style.item_radius }}px(像素)
          </div>
          <el-slider
            v-model="diyItem.style.item_radius"
            size="small"
            :min="0"
            :max="100"
          />
        </div>
      </storeDiyFormItem>
      <storeDiyFormItem label="文本样式">
        <storeDiyFormSelectBtn
          v-model="diyItem.style.item_bold"
          :data="itemBoldData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>

      <storeDiyFormItem label="背景状态">
        <storeDiyFormSelectBtn
          v-model="diyItem.style.bg_status"
          :data="showStatusData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="背景颜色" v-if="diyItem.style.bg_status == 1">
        <storeDiyFormColorBtn v-model="diyItem.style.bg" />
      </storeDiyFormItem>

      <storeDiyFormItem label="背景上圆角"  v-if="diyItem.style.bg_status == 1">
        <div class="editor-input-block">
          <div class="editor-input-desc">
            {{ diyItem.style.t_radius }}px(像素)
          </div>
          <el-slider
            v-model="diyItem.style.t_radius"
            size="small"
            :min="0"
            :max="100"
          />
        </div>
      </storeDiyFormItem>
      <storeDiyFormItem label="背景上圆角"  v-if="diyItem.style.bg_status == 1">
        <div class="editor-input-block">
          <div class="editor-input-desc">
            {{ diyItem.style.b_radius }}px(像素)
          </div>
          <el-slider
            v-model="diyItem.style.b_radius"
            size="small"
            :min="0"
            :max="100"
          />
        </div>
      </storeDiyFormItem>
      <storeDiyFormItem label="投影样式">
        <storeDiyFormSelectBtn
          v-model="diyItem.style.shade"
          :data="shadeData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <el-divider content-position="left">
        <div class="fw">边距</div>
      </el-divider>

      <storeDiyFormItem label="外左边距">
        <div class="editor-input-block">
          <div class="editor-input-desc">{{ diyItem.style.ml }}px(像素)</div>
          <el-slider
            v-model="diyItem.style.ml"
            size="small"
            :min="0"
            :max="60"
          />
        </div>
      </storeDiyFormItem>

      <storeDiyFormItem label="外右边距">
        <div class="editor-input-block">
          <div class="editor-input-desc">{{ diyItem.style.mr }}px(像素)</div>
          <el-slider
            v-model="diyItem.style.mr"
            size="small"
            :min="0"
            :max="60"
          />
        </div>
      </storeDiyFormItem>
      <storeDiyFormItem label="外上边距">
        <div class="editor-input-block">
          <div class="editor-input-desc">{{ diyItem.style.mt }}px(像素)</div>
          <el-slider
            v-model="diyItem.style.mt"
            size="small"
            :min="0"
            :max="60"
          />
        </div>
      </storeDiyFormItem>
      <storeDiyFormItem label="外下边距">
        <div class="editor-input-block">
          <div class="editor-input-desc">{{ diyItem.style.mb }}px(像素)</div>
          <el-slider
            v-model="diyItem.style.mb"
            size="small"
            :min="0"
            :max="60"
          />
        </div>
      </storeDiyFormItem>

      <storeDiyFormItem label="内左边距">
        <div class="editor-input-block">
          <div class="editor-input-desc">{{ diyItem.style.pl }}px(像素)</div>
          <el-slider
            v-model="diyItem.style.pl"
            size="small"
            :min="0"
            :max="60"
          />
        </div>
      </storeDiyFormItem>
      <storeDiyFormItem label="内右边距">
        <div class="editor-input-block">
          <div class="editor-input-desc">{{ diyItem.style.pr }}px(像素)</div>
          <el-slider
            v-model="diyItem.style.pr"
            size="small"
            :min="0"
            :max="60"
          />
        </div>
      </storeDiyFormItem>

      <storeDiyFormItem label="内上边距">
        <div class="editor-input-block">
          <div class="editor-input-desc">{{ diyItem.style.pt }}px(像素)</div>
          <el-slider
            v-model="diyItem.style.pt"
            size="small"
            :min="0"
            :max="60"
          />
        </div>
      </storeDiyFormItem>
      <storeDiyFormItem label="内下边距">
        <div class="editor-input-block">
          <div class="editor-input-desc">{{ diyItem.style.pb }}px(像素)</div>
          <el-slider
            v-model="diyItem.style.pb"
            size="small"
            :min="0"
            :max="60"
          />
        </div>
      </storeDiyFormItem>
    </template>
    <template #other>
      <el-divider content-position="left">
        <div class="fw">商品角标</div>
      </el-divider>
      <storeDiyFormItem label="样式">
        <storeDiyFormSelectBtn
          v-model="diyItem.other.show.label"
          :data="showStatusData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="角标样式" v-show="diyItem.other.show.label == 1">
        <storeDiyFormSelectBtn
          v-model="diyItem.other.label.type"
          :data="labelTypeData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>

      <storeDiyFormItem
        v-show="
          diyItem.other.show.label == 1 && diyItem.other.label.type == 'auto'
        "
        label="角标自定义图片"
      >
        <storeDiyFormImageBtn
          text="点击设置图片"
          size="small"
          v-model="diyItem.other.label.img"
        >
        </storeDiyFormImageBtn>
      </storeDiyFormItem>

      <el-divider content-position="left">
        <div class="fw">购买按钮</div>
      </el-divider>

      <storeDiyFormItem label="状态">
        <storeDiyFormSelectBtn
          v-model="diyItem.other.show.cart"
          :data="showStatusData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="按钮样式" v-show="diyItem.other.show.cart == 1">
        <storeDiyFormSelectBtn
          v-model="diyItem.other.cart.layout"
          :data="cartLayoutData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>

      <storeDiyFormItem
        label="购买按钮文本"
        v-show="diyItem.other.show.cart == 1 && diyItem.other.cart.layout != 0"
      >
        <el-input v-model="diyItem.other.cart.title" />
      </storeDiyFormItem>

      <el-divider content-position="left">
        <div class="fw">显示状态</div>
      </el-divider>

      <storeDiyFormItem label="商品名称">
        <storeDiyFormSelectBtn
          v-model="diyItem.other.show.goods_name"
          :data="showStatusData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="商品价格">
        <storeDiyFormSelectBtn
          v-model="diyItem.other.show.goods_price"
          :data="showStatusData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="商品原价">
        <storeDiyFormSelectBtn
          v-model="diyItem.other.show.market_price"
          :data="showStatusData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="商品描述">
        <storeDiyFormSelectBtn
          v-model="diyItem.other.show.selling_point"
          :data="showStatusData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <storeDiyFormItem label="商品销量">
        <storeDiyFormSelectBtn
          v-model="diyItem.other.show.goods_sales"
          :data="showStatusData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
    </template>
  </storeDiyForm>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import draggable from "vuedraggable";
export default defineComponent({
  name: "storeDiyEditorGoods",
  components: {
    draggable,
  },
});
</script>


<script  lang="ts" setup >
import { ref, getCurrentInstance, nextTick } from "vue";
import storeDiyForm from "../form/index.vue";
import storeDiyFormItem from "../form/item.vue";
import storeDiyFormItems from "../form/items.vue";
import storeDiyFormSelectBtn from "../form/select-btn.vue";
import storeDiyFormImageBtn from "../form/image-btn.vue";
import storeDiyFormLinkBtn from "../form/link-btn.vue";
import storeDiyFormCreateBtn from "../form/create-btn.vue";
import storeDiyFormDeleteBtn from "../form/delete-btn.vue";
import storeDiyFormColorBtn from "../form/color-btn.vue";

import storeDiyFormSelectGoodsCateBtn from "../form/select-goods-cate-btn.vue";
import storeDiyFormSelectGoodsBtn from "../form/select-goods-btn.vue";

import {
  diyGoodsDataType,
  diyGoodsDataItemType,
  diySelectDataType,
  Result,
  ResultError,
} from "@/types";
import { watch } from "fs";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    diyItem: diyGoodsDataType;
    opts: any;
  }>(),
  {
    opts: [],
    diyItem: () => {
      return {
        params: {
          source: "auto",
          cate_id: [],
          sort: "all",
          limit: 0,
        },
        layout:{
          value: 2,
          scroll: 0,
          border: 1,
        },
        style: {
          ml: 0,
          mr: 0,
          mt: 0,
          mb: 0,
          pl: 0,
          pr: 0,
          pt: 0,
          pb: 0,
          t_radius: 0,
          b_radius: 0,
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          item_radius: 0,
          item_border_color: "#f0f0f0",
          item_pm: 5,
          item_fill: 1,
          item_bold: 0,
        },
        other:{
          show: {
            goods_name: 1,
            goods_price: 1,
            market_price: 1,
            selling_point: 1,
            goods_sales: 1,
            cart: 0,
            label: 0,
          },
          label: {
            type: "new",
            layout: 1,
            img: "",
          },
          cart: {
            layout: 0,
            title: "购买",
          },
        },
        default_data: {
          goods_name: "此处显示商品名称，最多显示2行",
          goods_image: "",
          goods_price: 99.0,
          market_price: 99.0,
          goods_stock: 100,
          selling_point: "这里显示商品描述，最多显示1行",
          goods_sales: 100,
        },
        data: [],
      };
    },
  }
);

const emit = defineEmits(["update:modelValue"]);

const storeDiyFormSelectGoodsBtnRef = ref<HTMLElement>();

const changeSource = (source: string) => {
  props.diyItem.data = [];
  props.diyItem.params.goods_id = [];
  props.diyItem.params.cate_id = [];
};

const del = (id: number | string | undefined, index: number) => {
  nextTick(() => {
    proxy?.$refs["storeDiyFormSelectGoodsBtnRef"]?.del(id || 0);
  });
};

const sourceData = ref<Array<diySelectDataType>>([
  {
    title: "默认",
    value: "auto",
  },
  {
    title: "手动选择",
    value: "choice",
  },
  {
    title: "分类",
    value: "cate",
  },
]);

const layoutData = ref<Array<diySelectDataType>>([
  {
    title: "icon-one-layout-1",
    value: 1,
  },
  {
    title: "icon-one-layout-2",
    value: 2,
  },
  {
    title: "icon-one-layout-3",
    value: 3,
  },
  {
    title: "icon-one-layout-s",
    value: 4,
  },
]);

const scrollData = ref<Array<diySelectDataType>>([
  {
    title: "列表平铺",
    value: 0,
  },
  {
    title: "横向滑动",
    value: 1,
  },
]);

const layoutBorderData = ref<Array<diySelectDataType>>([
  {
    title: "无边",
    value: 1,
  },
  {
    title: "卡片投影",
    value: 2,
  },
  {
    title: "描边",
    value: 3,
  },
]);

const itemBoldData = ref<Array<diySelectDataType>>([
  {
    title: "常规",
    value: 0,
  },
  {
    title: "加粗",
    value: 1,
  },
]);

const showStatusData = ref<Array<diySelectDataType>>([
  {
    title: "隐藏",
    value: 0,
  },
  {
    title: "显示",
    value: 1,
  },
]);

const labelTypeData = ref<Array<diySelectDataType>>([
  {
    title: "新品",
    value: "new",
  },
  {
    title: "热卖",
    value: "hot",
  },
  {
    title: "自定义",
    value: "auto",
  },
]);

const cartLayoutData = ref<Array<diySelectDataType>>([
  {
    title: "默认",
    value: 0,
  },
  {
    title: "样式1",
    value: 1,
  },
  {
    title: "样式2",
    value: 2,
  },
  {
    title: "样式3",
    value: 3,
  },
  {
    title: "样式4",
    value: 4,
  },
]);

const shadeData = ref<Array<diySelectDataType>>([
  {
    title: "常规",
    value: 0,
  },
  {
    title: "投影",
    value: 1,
  },
]);

const sortData = ref<Array<diySelectDataType>>([
  {
    title: "综合",
    value: "all",
  },
  {
    title: "销量",
    value: "sales",
  },
  {
    title: "价格",
    value: "price",
  },
]);
</script>

<style scoped>
.diy-editor-select-goods-box {
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  border: 1px solid var(--el-border-color-lighter);
  padding: 5px;
}
.diy-editor-select-goods-item {
  margin-right: 10px;
  border: 1px solid var(--el-border-color-lighter);
  padding: 5px;
  position: relative;
  margin-bottom: 10px;
  width: calc(100% - 10px);
  display: flex;
  justify-content: space-between;
}
.diy-editor-select-goods-item .goods-name {
  width: calc(100% - 80px);
  font-size: 12px;
  line-height: 20px;
  height: 40px;
  overflow: hidden;

  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.diy-editor-select-goods-del {
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  width: 14px;
  height: 14px;
  font-size: 12px;
  text-align: center;
  line-height: 14px;
  cursor: pointer;
}
</style>